<template>
  <div class="user-list-page">
    <div class="container-big">
      <div class="page-content">
        <!-- <div class="alibaba-design" /> -->
        <!-- <div class="uncan-2019-text" /> -->
        <!-- <div class="uncan-right" /> -->
        <div v-if="list.length>0" class="from-tit cenLeft">
          <img src="https://gw.alicdn.com/tfs/TB1vpgTHcbpK1RjSZFyXXX_qFXa-200-200.png">
          请点击选择用票人信息
        </div>
        <div v-else class="from-tit cenCen from-tit-add">
          <img style=" width: 18px" src="https://gw.alicdn.com/tfs/TB1vpgTHcbpK1RjSZFyXXX_qFXa-200-200.png">
          请点击底部按钮新增用票人
        </div>
        <co-list margin>
          <co-list-item class="delted-right-icon" style="  cursor: pointer;position: relative ;" :class="{'action__select':action =='select'}" v-for="(item,index) in list" :key="index" @click="handleSelect(item)" link>
            <div v-if=" action =='select'" class="uNameSelect-box cenCen">
              <span class="uNameSelect">
                选择
              </span>
            </div>
            <span @click.stop="delTicketPsnDoc(item.id)" class="uNameSelect-del cenCen">
              <div>删除</div>
            </span>
            <span class="uName-uTel cenLeft">{{ item.uName }} | {{ item.uTel }} </span>
            <span class="edit cenCen" slot="right" @click.stop="update(item)">
              修改
            </span>
          </co-list-item>
        </co-list>
      </div>
    </div>
    <co-button to="/infoEntry" class="user-list-add-btn" block color="primary">
      新增用票人
    </co-button>
  </div>
</template>
<script>
import { getBirthdayFromIdCard } from "@/router/publicJs/getBirthdayFromIdCard";
import pubService from "./../../api/pubService";
import services from "../../api/profile";
import { getUrlParameter } from "@/router/publicJs/getUrlParameter.js"; // 得到url 参数并且赋值
import { getFromField } from "@/api/infoEntry.js"; // 获取表单字段等接口
export default {
  data() {
    return {
      action: "",
      list: []
    };
  },
  created() {
    this.action = this.$route.query.action;
    this.initFun();
  },
  methods: {
    // 检测表单字段是否一样
    async checkField(formJson) {
      let fromField = this.$store.state.infoEntry.fromField;
      let fromFieldCode = {}; //获取当前活动表单字段编码
      for (let i = 0; i < fromField.length; i++) {
        fromFieldCode[fromField[i].attribute.filedCode] =
          fromField[i].attribute.filedCode;
      }

      let formJsonCode = {}; //获取当前选项表单字段编码
      for (let i = 0; i < formJson.length; i++) {
        formJsonCode[formJson[i].attribute.filedCode] =
          formJson[i].attribute.filedCode;
      }
      const res = await this.isObjectValueEqual(fromFieldCode, formJsonCode);
      return new Promise(resolve => {
        resolve(res);
      });
    },
    isObjectValueEqual(a, b) {
      return new Promise(resolve => {
        let aProps = Object.getOwnPropertyNames(a);
        let bProps = Object.getOwnPropertyNames(b);
        if (aProps.length != bProps.length) {
          resolve(false);
          return;
        }
        for (let i = 0; i < aProps.length; i++) {
          let propName = aProps[i];
          if (a[propName] !== b[propName]) {
            resolve(false);
            return;
          }
        }
        resolve(true);
        return;
      });
    },
    async initFun() {
      let resGetUrlParameter = await getUrlParameter(); //赋值获取url参数
      if (this.$store.state.infoEntry.fromField.length == 0) {
        let resGetFromField = await this.getFromField();
      }
      this.loadList();
      // console.log(this.$store.state.infoEntry.fromField);
    },
    // 删除用票人信息
    async delTicketPsnDoc(id) {
      const isConfirm = await this.$confirm("您确定进行删除？", {
        title: "温馨提示",
        okLabel: "确认删除",
        cancelLabel: "取消",
        showCancel: true
      });
      if (!isConfirm) {
        return;
      }
      this.$store.state.loading = true;
      const { success = false } = await pubService.delTicketPsnDoc({
        id
      });
      this.$store.state.loading = false;
      if (success) {
        this.$toast("删除成功");
        this.loadList();
      }
    },
    // 获取表单字段
    async getFromField() {
      let resData = await getFromField(
        this.$store.state.buyTicket.activityId,
        this.$store.state.buyTicket.ticketTypeId
      ); // 参数是活动id和票id
      if (resData.success) {
        this.$store.state.infoEntry.fromField = resData.result;
        this.addAreaCode();
      } else {
        // this.$toast(resData.errorMsg);
      }
    },
    // 关于手机号uTel增加区号字段
    addAreaCode() {
      let fromField = this.$store.state.infoEntry.fromField;
      for (let i = 0; i < fromField.length; i++) {
        if (fromField[i].attribute.filedCode == "uTel") {
          fromField[i].attribute.areaCode = "86";
        }
      }
      this.$store.state.infoEntry.fromField = fromField;
    },
    // 判断当前年龄是否符合青年票标准
    async checkIdcardAge(formJson) {
      let value = true;
      // formJson.push({
      //   attribute: {
      //     filedValue: "420222199212212418",
      //     filedCode: "uIdCard",
      //     titName: "证件号码",
      //     placeholder: "请输入",
      //     maxLength: 29,
      //     ifCheck: true
      //   },
      //   componentName: "stringTem"
      // });
      for (let i = 0; i < formJson.length; i++) {
        if (formJson[i].attribute.filedCode == "uIdCard") {
          value = await getBirthdayFromIdCard(formJson[i].attribute.filedValue);
        }
      }
      return new Promise(resolve => {
        resolve(value);
      });
    },
    async handleSelect(item) {
      const { action } = this.$route.query;

      if (action === "select") {
        let carTicketList = this.$store.state.buyTicket.carTicketList;
        let useTicketPopleId = this.$store.state.buyTicket.useTicketPopleId;
        // let res = await this.checkuseTicketPopleId(item.id, useTicketPopleId);
        let res = false;
        if (res) {
          this.$toast("当前购票信息已被添加");
          return;
        }
        let ticketId = "";
        let indexI = "";
        let indexJ = "";
        for (let i = 0; i < carTicketList.length; i++) {
          for (let j = 0; j < carTicketList[i].useTicketPople.length; j++) {
            if (
              useTicketPopleId ==
              carTicketList[i].useTicketPople[j].useTicketPopleId
            ) {
              indexI = i;
              indexJ = j;
              ticketId = carTicketList[i].body_ticket[j].ticketId;
            }
          }
        }
        if (ticketId == "185" && !(await this.checkIdcardAge(item.formJson))) {
          this.$toast("青年票仅限中国大陆身份证且符合年龄者购买");
          return;
        }

        if (!(await this.checkField(item.formJson))) {
          this.$toast("请重新填写当前购票信息");
          return;
        }
        this.$set(
          carTicketList[indexI].useTicketPople[indexJ],
          "userData",
          item
        );
        // for (let i = 0; i < carTicketList.length; i++) {
        //   for (let j = 0; j < carTicketList[i].useTicketPople.length; j++) {
        //     if (
        //       useTicketPopleId ==
        //       carTicketList[i].useTicketPople[j].useTicketPopleId
        //     ) {
        // this.$set(carTicketList[i].useTicketPople[j], "userData", item);
        //     }
        //   }
        // }
        this.$store.state.buyTicket.carTicketList = carTicketList;
        this.$router.go(-1);
        // TODO 设置选择人信息
        return;
      }

      this.update(item);
    },
    // 检验用票人的信息是否已经被重复添加
    checkuseTicketPopleId(id, useTicketPopleId) {
      return new Promise(resolve => {
        let ifAdd = false;
        let carTicketList = this.$store.state.buyTicket.carTicketList;
        for (let i = 0; i < carTicketList.length; i++) {
          for (let j = 0; j < carTicketList[i].useTicketPople.length; j++) {
            if (
              carTicketList[i].useTicketPople[j].userData &&
              carTicketList[i].useTicketPople[j].useTicketPopleId !=
                useTicketPopleId &&
              id == carTicketList[i].useTicketPople[j].userData.id
            ) {
              ifAdd = true;
            }
          }
        }
        resolve(ifAdd);
      });
    },
    update(item) {
      this.$router.push({
        path: "/infoEntry",
        query: {
          ...this.$route.query,
          id: item.id
        }
      });
    },
    loadList() {
      services.getUserList().then(data => {
        this.list = data;
        this.$store.state.buyTicket.userTicketList = this.list || [];
      });
    }
  }
};
</script>

<style lang="less">
.user-list-page {
  position: relative;
  height: 100%;
  padding-bottom: 110px;
  .page-content {
    position: relative;
    padding-top: 196px;
    padding-left: 30px;
    padding-right: 30px;
  }
}
.edit {
  z-index: 2;
  position: absolute;
  top: 0px;
  right: 60px;
  width: auto;
  padding: 0px 30px;
  height: 100%;
  cursor: pointer;
}
.from-tit {
  width: 100%;
  height: auto;
  text-align: left;
  font-size: 28px;
  color: #b9b9bb;
  margin-bottom: 16px;
}
.from-tit > img {
  width: 26px;
  height: auto;
  margin-right: 6px;
}
.from-tit-add {
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100%;
  font-size: 32px;
}
.uNameSelect-box {
  width: auto;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 0px 8px;
}
.uNameSelect {
  color: #fff;
  // margin-right: 16px;
  width: auto;
  height: auto;
  font-size: 18px;
  padding: 6px 10px;
  cursor: pointer;
  background-color: transparent;
  background-image: linear-gradient(-116deg, #3cb9ff 0%, #6044d4 100%);
}
.uNameSelect-del {
  position: absolute;
  top: 0px;
  right: 145px;
  width: auto;
  height: 100%;
  cursor: pointer;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.6);
}
.delted-right-icon > div > div > svg {
  display: none;
}
.delted-right-icon > div > div > span {
  right: 8px;
}
.uName-uTel {
  text-align: left;
  max-width: 60%;
  line-height: 36px;
  // border: 1px solid red;
}
.action__select > div {
  padding-left: 86px;
}
</style>
